<template>
  <div class="editor">
    <div class="editor-content">
      <cus-editable-toolbar />
      <!-- 上传知识元 -->
      <div class="upload">
        <el-tooltip effect="dark" placement="bottom" popper-class="upload-popper">
          <template #content>
            <span>上传知识元</span>
          </template>
          <img src="/src/assets/knowledge-element/word.png" @click="upload" class="upload-img" width="16">
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import $, { emitter } from '$';
import UploadComponent from './components/upload.vue';
import { ElMessage, ElLoading } from 'element-plus';
import store from './store/index'

export default {
  props: {
    knowledgeData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const upload = () => {
      $.modal.create({ title:'上传知识元', width: 480, zIndex: 2022, component: UploadComponent, props: { moduleId: store.state.moduleId } }).then((res) => {
        if(res.result) {
          ElMessage.success('上传知识元成功~！');
          $.http.post('/admin/knowledgeContent/queryContent', { moduleId: props.knowledgeData.id, templateId: props.knowledgeData.templateId }).then((res) => {
            let knowledge:any = [] //类型为知识点时序号
            let question:any = [] //类型为例题时序号
            res.json.map((item) => {
              if(item.type === 3) { knowledge.push(item) }
              else if(item.type === 4) { item.listShow = true; question.push(item) }
              knowledge.map((item1, index) => {
                item.index = index + 1
              })
            })
            res.json.map((item) => {
              item.children = []
              let children = question.filter(p => item.id === p.pid)
              item.children = children
              if(item.type === 4) {
                question.map((qItem) => {
                  if(qItem.pid === item.id) { qItem.isChange = true }
                })
                let quetionData = question.filter((p:{ isChange }) => !p.isChange)
                quetionData.map((qItem, qIdx) => {
                  qItem.index = qIdx + 1
                  if(item.pid === qItem.id) { item.index = qItem.index }
                  if(item.id === qItem.id) { item = qItem }
                })
              }
            })
            store.commit('set_paper_init', res.json);
          });
        }
      })
    }
    return { upload }
  }
}
</script>
<style lang="scss">
  .upload-popper {
    padding: 6px;
  }
</style>
<style lang="scss" scoped>
  .editor {
    line-height: 40px;
    background: #fff;
    .editor-content{
      margin: 0 auto;
      width: 800px;
      display: flex;
      align-items: center;
      .upload {
        cursor: pointer;
        line-height: 12px;
        padding: 4px;
        & > i {
          font-size: 24px;
          font-style: normal;
        }
        &:hover {
          background: #ddd;
          border-radius: 4px;
        }
      }
    }
  }
</style>